<template>
  <div class="goodslist">
    <!-- 标签页切换 -->
    <el-tabs v-model="tab" @tab-click="change">
      <el-tab-pane
        :label="itme.name"
        :name="itme.tab"
        v-for="(itme, key) in goodsData"
        :key="key"
      >
      </el-tab-pane>
      <div class="box">
        <el-button type="primary" size="small" @click="$router.push('/addgoods')"
          >发布商品</el-button
        >
        <el-button type="danger" size="small" @click="delSelection">批量删除</el-button>
        <el-button size="small" @click="changeStatus(1)">上架</el-button>
        <el-button size="small" @click="changeStatus(0)">下架</el-button>
        <!-- 搜索输入框 -->
        <el-input type="text" placeholder="输入内容" size="small" v-model="keywords" />
        <!-- 搜索按钮 -->
        <el-button type="info" size="small" @click="getUserList">搜索</el-button>
        <!-- 高级搜索 -->
        <el-button type="primary" size="small">高级搜索</el-button>
      </div>
      <el-table
        :data="list"
        border
        style="width: 100%"
        @selection-change="SelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="title" label="商品" width="260">
          <template v-slot="slot">
            <div>
              <dl>
                <dt>
                  <img :src="slot.row.cover" alt="" />
                </dt>
                <dd>
                  <p>{{ slot.row.title }}</p>
                  <p>{{ slot.row.category.name }}</p>
                  <p>{{ slot.row.category.create_time }}</p>
                </dd>
              </dl>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sale_count" label="实际销量" width="60"> </el-table-column>
        <el-table-column prop="" label="商品状态">
          <template v-slot="scope">
            <el-button type="success" v-if="scope.row.status == 1" size="small"
              >上架</el-button
            >
            <el-button type="primary" v-else size="small">库存</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="ischeck" label="审核状态">
          <template v-slot="scope">
            <el-button type="success" v-if="scope.row.ischeck == 0" size="small" @click="checkpass({id:scope.row.id,status:1})"
              >审核通过</el-button
            >
            <el-button type="danger" v-if="scope.row.ischeck == 0" size="small" @click="checkpass({id:scope.row.id,status:2})">拒绝审核</el-button>
            <el-button type="success" v-if="scope.row.ischeck == 1" size="small"
              >通过</el-button
            >
            <el-button type="danger" v-if="scope.row.ischeck == 2" size="small">拒绝</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="总库存"> </el-table-column>
        <el-table-column prop="min_price" label="价格（元）">
          <template v-slot="scope">
            <span>原价：{{ scope.row.min_oprice }}</span
            ><br />
            <span>现价：{{ scope.row.min_price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template v-slot="scope">
            <el-button type="primary" plain @click="$router.push('/editgoods?id='+scope.row.id)">编辑</el-button>
          <el-button type="danger" plain @click="delGoods(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tabs>
    <el-pagination
      @size-change="SizeChange"
      @current-change="pageChange"
      :current-page="page"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsData: [
        { name: "全部", tab: "all" },
        { name: "审核中", tab: "checking" },
        { name: "出售中", tab: "saling" },
        { name: "已下架", tab: "off" },
        { name: "库存预警", tab: "min_stock" },
        { name: "回收站", tab: "delete" },
      ],
      page: 1,
      tab: "all",
      limit: 2,
      starttime: "",
      endtime: "",
      title: "",
      category_id: "",
      list: [],
      ids: [],
      total: 0,
      keywords: "",
    };
  },
  created() {},
  mounted() {
    this.getgoodsList();
  },
  methods: {
    getgoodsList() {
      this.$axios
        .get(
          `/admin/goods/${this.page}?limit=${this.limit}&tab=${this.tab}&title=${this.keywords}`
        )
        .then((res) => {
          console.log(res);
          this.list = res.data.list;
          this.total = res.data.totalCount;
        })
        .catch((error) => {});
    },
    // 标签页切换
    change() {
      console.log(this.tab);
      this.getgoodsList();
    },
    // 列表选中状态发生改变的时候触发
    SelectionChange(rows) {
      // console.log(rows)
      rows.forEach((item) => {
        this.ids.push(item.id);
      });
      console.log(this.ids);
    },
    // 上架/下架
    changeStatus(status) {
      if (this.ids == "") {
        this.$message.error("没有选择数据");
        return false;
      }
      this.$axios
        .post("/admin/goods/changestatus", { ids: this.ids, status: status })
        .then((res) => {
          this.getgoodsList();
        })
        .catch((res) => {});
    },
    // 批量删除
    delSelection() {
      this.$axios
        .post("/admin/goods/delete_all", { ids: this.ids })
        .then((res) => {
          // console.log(res)
          this.$message.success("批量删除成功");
          this.getgoodsList();
        })
        .catch((error) => {
          console.log(error.response.data);
        });
    },
    // 分页
    SizeChange(size) {
      // console.log(size)
      this.limit = size;
      this.getgoodsList();
    },
    pageChange(page) {
      // console.log(page)
      this.page = page;
      this.getgoodsList();
    },
    // 搜索
    getUserList() {
      this.getgoodsList();
    },
    // 审核通过/不通过
    // 传当前商品id和状态
    checkpass({id,status}){
      console.log(id,status);
      this.$axios.post(`/admin/goods/${id}/check`,{ischeck:status}).then((res)=>{
        this.$message.success('审核成功');
        this.getgoodsList();
      })
    },
    // 删除
    delGoods(id){
      // alert(id)
      this.$axios.post(`/admin/goods/${id}/delete`).then((res)=>{
        // console.log(res)
        if(res.msg == 'ok'){
          this.$message.success('删除成功')
          this.getgoodsList();
        }
      })
    }
  },
  computed: {},
};
</script>

<style long="scss" scoped>
.box {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  padding-bottom: 10px;
  display: flex;
}
img {
  width: 50px;
  height: 50px;
}
dl {
  display: flex;
}
</style>
